feat(solid-query): Solid Query Adapter for TanStack Query#4211
Conversation
TkDodo
left a comment
There was a problem hiding this comment.
just noting down some improvements to the whole structure that we could also do in a follow-up. Maybe this gets easier with a task runner like turborepo where we also have an open PR
| overrides: [ | ||
| { | ||
| exclude: './packages/solid-query/**', | ||
| presets: ['@babel/react'], | ||
| }, | ||
| { | ||
| include: './packages/solid-query/**', | ||
| presets: ['babel-preset-solid'], | ||
| }, | ||
| ], |
There was a problem hiding this comment.
I'm no babel expert, but I think it should be possible to also have one babel config per package? So we would only keep the shared things in top level and then move the framework specific things further down ?
| printBasicPrototype: false, | ||
| }, | ||
| moduleNameMapper, | ||
| preset: d.includes("solid") ? 'solid-jest/preset/browser' : undefined, |
There was a problem hiding this comment.
We are currently running jest at the top level for all tests. I think what we should rather do is:
- have each package define their own jest task that uses its own jest config
- we can have shared configs in a top level preset
| ...buildConfigs({ | ||
| name: 'solid-query', | ||
| packageDir: 'packages/solid-query', | ||
| jsName: 'SolidQuery', | ||
| outputFile: 'index', | ||
| entryFile: 'src/index.ts', | ||
| globals: { | ||
| 'solid-js/store': 'SolidStore', | ||
| 'solid-js': 'Solid', | ||
| '@tanstack/query-core': 'QueryCore', | ||
| }, | ||
| bundleUMDGlobals: [ | ||
| '@tanstack/query-core', | ||
| ], | ||
| }), |
|
Before this is merged @ardeora has some follow up work that is not included. So please hold off until we have it. |
Add an adapter to TanStack Query to support SolidJS. Co-authored-by: Aryan Deora <adeora@iu.edu> Co-authored-by: Jen Kaplan <jenniferckaplan@gmail.com>
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit de90e6b:
|
Collaborators: @oscartbeaumont @lukesmurray @jennyckaplan
Collaborators: @oscartbeaumont @lukesmurray @jennyckaplan Co-Authored-By: Oscar Beaumont <oscar@otbeaumont.me> Co-Authored-By: Luke Murray <34020210+lukesmurray@users.noreply.github.com> Co-Authored-By: Jen Kaplan <25395806+jennyckaplan@users.noreply.github.com>
Thank you! I added solid-query to the packages in the list below |
Yep! I added the typescript example and it's working great here https://codesandbox.io/s/tanstack-query-example-solid-basic-typescript-lhsczt |
|
Alright I think we should be good to go here. All the tests seem to be passing. And I applied the batching state updates which works great now. Thanks for all the feedback here 😄 |
|
exciting 🚀 |
Co-Authored-By: Oscar Beaumont <oscar@otbeaumont.me> Co-Authored-By: Luke Murray <34020210+lukesmurray@users.noreply.github.com> Co-Authored-By: Jen Kaplan <25395806+jennyckaplan@users.noreply.github.com>
|
just wanted to pop in and say great work, this is so exciting! |
Co-Authored-By: Oscar Beaumont <oscar@otbeaumont.me> Co-Authored-By: Luke Murray <34020210+lukesmurray@users.noreply.github.com> Co-Authored-By: Jen Kaplan <25395806+jennyckaplan@users.noreply.github.com>
Co-Authored-By: Oscar Beaumont <oscar@otbeaumont.me> Co-Authored-By: Luke Murray <34020210+lukesmurray@users.noreply.github.com> Co-Authored-By: Jen Kaplan <25395806+jennyckaplan@users.noreply.github.com>
|
Ok everything seems to be ready to go. @TkDodo feel free to merge. Please add @ardeora, @lukesmurray, @jennyckaplan, and @oscartbeaumont as co-authors on the final merge if possible. This was a team effort, led by @ardeora and I would love to see everyone get recognition for their contributions here. Cheers 🍻 |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4211 +/- ##
==========================================
+ Coverage 96.36% 96.57% +0.21%
==========================================
Files 45 72 +27
Lines 2281 2949 +668
Branches 640 814 +174
==========================================
+ Hits 2198 2848 +650
- Misses 80 99 +19
+ Partials 3 2 -1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
I was just about to merge this when I took another look at the codesandbox preview build, and it sadly doesn't render anymore: https://codesandbox.io/s/tanstack-query-example-solid-basic-typescript-17fbsy The error is: I was working yesterday for sure :/ |
Co-Authored-By: Oscar Beaumont <oscar@otbeaumont.me> Co-Authored-By: Luke Murray <34020210+lukesmurray@users.noreply.github.com> Co-Authored-By: Jen Kaplan <25395806+jennyckaplan@users.noreply.github.com>
same things here, |
|
Yes, we are seeing this, too. This seems to be an upstream problem with It worked with we actually pinned the plugin version because of this in our official example, which is working: |
Yeah this was an issue with vite-plugin-solid that we just recently resolved. Can you upgrade vite-plugin-solid to v2.3.8? https://stackblitz.com/edit/vitejs-vite-csdjj1?file=package.json,src%2Fmain.tsx,src%2FApp.tsx Here is a working stackblitz sandbox for reference |
Yes it is ok i managed to get it working and added it as an addon to Create JD App, great work you did there. |
|
@all-contributors |
|
@all-contributors |
|
I've put up a pull request to add @jennyckaplan! 🎉 |
|
@all-contributors |
|
I've put up a pull request to add @oscartbeaumont! 🎉 |
|
Why does this break for every patch version of |
|
I'm not sure, and I'm sorry you're having that issue. I suggest posting an issue to |
|
why invent new names for the API? edit: because react is wrong and solid is right.
|
|
because caching + persistence = profit Details/*
@tanstack/solid-query-persist-client
usage
this is a drop-in replacement for QueryClientProvider from @tanstack/solid-query
function App() {
return (
<PersistQueryClientProvider
client={queryClient}
persister={createPersister()}
>
<Main/>
</PersistQueryClientProvider>
)
}
see also
https://tanstack.com/query/v4/docs/plugins/persistQueryClient#persistqueryclientprovider
based on
QueryClientProvider in
node_modules/@tanstack/solid-query/build/lib/QueryClientProvider.esm.js
node_modules/@tanstack/solid-query/build/solid/QueryClientProvider.jsx
PersistQueryClientProvider in
node_modules/@tanstack/react-query-persist-client/build/lib/PersistQueryClientProvider.esm.js
persistQueryClientSubscribe in
node_modules/@tanstack/query-persist-client-core/build/lib/persist.esm.js
*/
import { createContext, mergeProps, onMount, onCleanup } from 'solid-js';
import { persistQueryClientSubscribe } from "@tanstack/query-persist-client-core"
import { defaultContext } from "@tanstack/solid-query"
// TODO?
// export { persistQueryClient, persistQueryClientRestore, persistQueryClientSave, persistQueryClientSubscribe }
// export { removeOldestQuery }
//export * from '@tanstack/query-persist-client-core';
const QueryClientSharingContext = createContext(false); // If we are given a context, we will use it.
// Otherwise, if contextSharing is on, we share the first and at least one
// instance of the context across the window
// to ensure that if Solid Query is used across
// different bundles or microfrontends they will
// all use the same **instance** of context, regardless
// of module scoping.
function getQueryClientContext(context, contextSharing) {
if (context) {
return context;
}
if (contextSharing && typeof window !== 'undefined') {
if (!window.SolidQueryClientContext) {
window.SolidQueryClientContext = defaultContext;
}
return window.SolidQueryClientContext;
}
return defaultContext;
}
export const PersistQueryClientProvider = (props) => {
const mergedProps = mergeProps({
contextSharing: false,
}, props);
let persistQueryClientUnsubscribe
onMount(() => {
// same as in non-persisted provider
//console.log('PersistQueryClientProvider.onMount: mount')
mergedProps.client.mount()
// persistence ...
// note: different API
// persistQueryClientSubscribe: props.queryClient
// QueryClientProvider: props.client
mergedProps.queryClient = mergedProps.client
// subscribe
//console.log('PersistQueryClientProvider.onMount: subscribe')
persistQueryClientUnsubscribe =
persistQueryClientSubscribe(mergedProps)
// test: mount later
//mergedProps.client.mount()
});
onCleanup(() => {
// same as in non-persisted provider
//console.log('PersistQueryClientProvider.onCleanup: unmount')
mergedProps.client.unmount()
// persistence ...
//console.log('PersistQueryClientProvider.onCleanup: unsubscribe')
// unsubscribe
persistQueryClientUnsubscribe()
})
const QueryClientContext = getQueryClientContext(mergedProps.context, mergedProps.contextSharing);
return (
<QueryClientSharingContext.Provider value={!mergedProps.context && mergedProps.contextSharing}>
<QueryClientContext.Provider value={mergedProps.client}>
{mergedProps.children}
</QueryClientContext.Provider>
</QueryClientSharingContext.Provider>
);
};next challenge:
with indexeddb persister from problem:
// ❌ react version
const queryKey = ["todos", todo]
useQuery(queryKey, fetchTodos)
// ✅ solid version
const queryKey = ["todos", todo()]
const getQueryKey = () => queryKey
createQuery(getQueryKey, fetchTodos)this looks like a good place to cleanup the queryKey
// NOTE(milahu): this is reactive to options
createComputed(() => {
const newDefaultedOptions = queryClient.defaultQueryOptions(options);
// TODO(milahu): cleanup options?
observer.setOptions(newDefaultedOptions);
});
related: https://github.com/faassen/solid-dexie related: |
|
Thank you for the comments @milahu. You figured out the naming logic before I had a chance to reply! With regard to the missing apis.
About your error, you may want to use unwrap to get the store without a proxy. About your proposal for the query key. I'm not quite sure if it would work. It depends on what // only runs once
const queryKey = ["todos", todo()]
// runs multiple times but returns the non-reactive array every time
const getQueryKey = () => queryKeyIn general, if you use query key factories the fact that query keys are functions can be abstracted away fairly easily and that's probably the approach I would recommend. |
This pull request aims to add the TanStack Query adapter for Solid JS. This pull request will add the following key primitives to the package.
createQuerycreateQueriescreateInfiniteQueriescreateMutationuseIsFetchinguseIsMutatinguseQueryClientQueryClientQueryClientProviderThe adapter docs have been updated as well as examples have been added.
Acknowledgments
The work on solid-query would not have been possible without
This is a follow-up to #4195 but rebased on
mainand with commits frombetaremoved per discussion with @TkDodo and @ardeora.